<template>
	<view class="production">
		<view class="left">
			<view class="leftContent" v-for="(item,index) in productionList" v-if="index%2!=0">
				<image :src="item.coverImg" mode="aspectFill" class="productionImage"></image>
				<text class="productionName">{{item.productionName}}</text>
				<p class="price">￥{{item.price}}</p>
			</view>
		</view>
		<view class="right">
			<view class="rightContent" v-for="(item,index) in productionList" v-if="index%2==0">
				<image :src="item.coverImg" mode="aspectFill" class="productionImage"></image>
				<text class="productionName">{{item.productionName}}</text>
				<p class="price">￥{{item.price}}</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				typeId:'',
				pageSize: 10,
				pageIndex:1,
				productionList:[],
			}
		},
		onLoad(options){
			console.log("获取到Secondid?",options.SecondId)
			this.typeId = JSON.parse(options.SecondId)
		},
		mounted(){
			this.getList();
		},
		onReachBottom(){
			this.pageIndex++;
			console.log('下拉刷新',this.pageIndex);
			this.getList();
		},
		methods:{
			
			getList(){
				var _this=this;	
				this.$axios({
					method:'POST',
					url:`/production/typeProduction/${_this.pageIndex}`,
					headers:{
						'Content-Type':'application/json'
					},
					data:{
						typeId:_this.typeId,
					},
					params:{
						pageSize:_this.pageSize,
					}
					
					
				}).then(
					res =>{
						console.log(res.data);
						for(var i=0;i<res.data.length;i++){
							// console.log(res.data[i].productionName);
							var tmp={}
							tmp["coverImg"]=res.data[i].coverImg;
							tmp["price"]=res.data[i].price;
							tmp["productionName"]=res.data[i].productionName;
							this.productionList.push(tmp);
						}
						
					}
				).catch(
					err =>{
						console.log(err);
					}
				)
			}
	
		}
	}
</script>

<style lang="scss">

	.production{
		font-family:"Hiragino Sans GB","PingFang SC";
		width:100%;
		height:100%;
		display:flex;
		flex-direction: row;
		background-color: #eeeeec;
		.left{
			width:50%;
			height:100%;
			.leftContent{
				width:350upx;
				background-color: white;
				margin-left:15upx;
				margin-right:10upx;
				margin-top:30upx;
				margin-bottom:30upx;
				align-items: center;
				
				
			}
		}
		.productionImage{
			width:250upx;
			height:250upx;
			border-radius: 10%;
			margin-left: 14.5%;
			margin-top: 12%;
			border:1upx solid rgba($color: #e1e1e1, $alpha: 1.0);
		}
		.productionName{
			margin-top:1upx;
			font-size:30upx;
			width:80%;
			margin-left: 16%;
			overflow: hidden;
			-webkit-line-clamp: 1;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;      
		}
		.price{
			font-weight: 900;
			font-size:40upx;
			padding-bottom: 20upx;
			color:red;
			margin-left: 14%;
		}
		.right{
			width:50%;
			// height:1024upx;
			.rightContent{
				width:350upx;
				background-color: white;
				margin-left:10upx;
				margin-right:15upx;
				margin-top:30upx;
				margin-bottom:30upx;
				align-items: center;
				
			}
		}
	}
</style>